import {designPage, reactive} from "@peryl/react-compose";
import {Button, ButtonGroup, Checkbox, i18n, PageCard, PageCardContent, PageCardTitle, Plc, PlcCheck, PlcIndex, Table} from "plain-design";
import {useDemoData} from "../../common/useDemoData";

const Demo1 = designPage(() => {

  const demoData = useDemoData('data/data-1.json');

  const state = reactive({
    checked: null as any,
    toggleOnClickRow: false,
  });

  return () => {
    return (
      <PageCard>
        <PageCardTitle title={i18n.$intl('page.checkList.singleSelect').d("单选")}>
          <ButtonGroup style={{ margin: '4px 0' }}>
            <Button label={!!state.checked ? `${i18n.$intl('page.checkList.checked').d("已选中")}:${state.checked.name}` : i18n.$intl('page.checkList.checkNothing').d('未选中节点')}/>
            <Button label={i18n.$intl('page.checkList.checkThirdRow').d("选中第三条数据")} onClick={() => state.checked = demoData.data[2]}/>
            <Button>
              <Checkbox v-model={state.toggleOnClickRow} label={i18n.$intl('page.checkList.checkOnClick').d("点击行的时候选中")}/>
            </Button>
          </ButtonGroup>
        </PageCardTitle>
        <PageCardContent>
          <Table
            loading={demoData.loading}
            data={demoData.data}
            summaryData={demoData.summaryData}
            showRows={10}
            virtual
          >
            <PlcCheck field="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow} multiple={false}/>
            <Plc field="id" title={i18n.$intl('page.checkList.id').d("编号")}/>
            <Plc field="size" title={i18n.$intl('page.checkList.size').d("大小")}/>
            <Plc field="name" title={i18n.$intl('page.checkList.name').d("名称")}/>
            <Plc field="date" title={i18n.$intl('page.checkList.date').d("日期")}/>
            <Plc field="color" title={i18n.$intl('page.checkList.color').d("颜色")}/>
            <Plc field="star" title={i18n.$intl('page.checkList.star').d("评分")}/>
          </Table>
        </PageCardContent>
      </PageCard>
    );
  };
});


const Demo2 = designPage(() => {

  const demoData = useDemoData('data/data-1.json');

  const state = reactive({
    checked: null as any,
    toggleOnClickRow: true,
  });

  return () => (
    <PageCard>
      <PageCardTitle title={i18n.$intl('page.checkList.multipleSelect').d("多选")}>
        <ButtonGroup style={{ margin: '4px 0' }}>
          <Button label={!!state.checked ? `${i18n.$intl('page.checkList.checked').d("已选中")}:${state.checked?.map((i: any) => i.name).join(',')}` : i18n.$intl('page.checkList.checkNothing').d('未选中节点')}/>
          <Button label={i18n.$intl('page.checkList.checkThirdRow').d("选中第三条数据")} onClick={() => state.checked = [demoData.data[2]]}/>
          <Button>
            <Checkbox v-model={state.toggleOnClickRow} label={i18n.$intl('page.checkList.checkOnClick').d("点击行的时候选中")}/>
          </Button>
        </ButtonGroup>
      </PageCardTitle>
      <PageCardContent>
        <Table
          loading={demoData.loading}
          data={demoData.data}
          summaryData={demoData.summaryData}
          showRows={10}
          virtual
        >
          <PlcCheck field="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow}/>
          <PlcIndex/>
          <Plc field="id" title={i18n.$intl('page.checkList.id').d("编号")}/>
          <Plc field="size" title={i18n.$intl('page.checkList.size').d("大小")}/>
          <Plc field="name" title={i18n.$intl('page.checkList.name').d("名称")}/>
          <Plc field="date" title={i18n.$intl('page.checkList.date').d("日期")}/>
          <Plc field="color" title={i18n.$intl('page.checkList.color').d("颜色")}/>
          <Plc field="star" title={i18n.$intl('page.checkList.star').d("评分")}/>
        </Table>
      </PageCardContent>
    </PageCard>
  );
});

export default designPage(() => {
  return () => <>
    <Demo1/>
    <Demo2/>
  </>;
});
